<template>
  <div class="box-card">
    <div class="dg-toolbar">
      <div class="menu-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <platform />
            </el-icon>
            {{ $t('mes.realTimeDataOnLvt') }}
          </el-menu-item>
        </el-menu>
        <div class="menu-right">
          <el-form :inline="true" :model="formData" label-width="100px">
            <el-form-item :label="$t('mes.orderNumber')">
              <el-input
                  size="default"
                  :placeholder="$t('wms.pleaseEnter')"
                  v-model="formData.soCode">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('wms.lineNumber')">
              <el-input
                  size="default"
                  :placeholder="$t('wms.pleaseEnter')"
                  v-model="formData.soLine">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('mes.finishedMateriarcode')" label-width="200px">
              <el-input
                  size="default"
                  :placeholder="$t('wms.pleaseEnter')"
                  v-model="formData.materialCode">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <el-icon>
                  <search />
                </el-icon>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="dg-content">
      <el-table border :data="dgDataFilter" v-loading="loading" :fit="true" table-layout="fixed" header-align="center" stripe
                style="width:100%;height: 100%;"
                :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                :cell-style="{textAlign: 'center'}">
        <!--<el-table-column prop="id" label="id" width1="80" />-->
        <el-table-column :label="$t('mes.orderInformation')">
          <el-table-column prop="soCode" :label="$t('wms.salesNo')" width="140" />
          <el-table-column prop="soLine" :label="$t('mes.orderIineNumber')" width="100" />
          <el-table-column prop="materialCode" :label="$t('wms.materialCode')" width="120">
            <template #default="scope">
              <el-popover trigger="hover" placement="top" width="200">
                <el-descriptions class="margin-top" :column="1" size="small" border>
                  <el-descriptions-item>
                    <template #label>
                      <i class="el-icon-user"></i>
                      {{ $t('mes.finishedMaterialSpec') }}
                    </template>
                    {{ scope.row.materialSpec }}
                  </el-descriptions-item>
                </el-descriptions>
                <template v-slot:reference>
                  <div class="name-wrapper">
                    <el-tag size="large" effect="plain">{{ scope.row.materialCode }}
                    </el-tag>
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" :label="$t('mes.finishedMaterialName')" width="120" />
          <!--<el-table-column prop="materialSpec" label="成品物料规格" />-->
          <el-table-column prop="pcsPerBox" :label="$t('wms.eachPiece')" width="90" />
          <el-table-column prop="customerModel" :label="$t('mes.customerModel')" width="100" />
          <el-table-column prop="deliveryDate" :label="$t('mes.dateOfDelivery')" />
          <el-table-column prop="salesQty" :label="$t('mes.salesQtyOrBox')" />
          <el-table-column prop="pcsQty" :label="$t('mes.totalNumberOfPieces')" />
        </el-table-column>
        <el-table-column :label="$t('mes.summary')">
          <el-table-column prop="currentInvTotalQty" :label="$t('mes.finishedGoodsInvent')" width="95" />
          <el-table-column prop="currentLvtWipQty" :label="$t('mes.lvtInOperation')" width="90" />
        </el-table-column>
        <el-table-column :label="$t('mes.occupideQty')">
          <el-table-column prop="invOccupyQty" :label="$t('mes.inventory')" width="80" />
          <el-table-column prop="lvtWipOccupyQty" :label="$t('mes.lvtInOperation')" width="100" />
        </el-table-column>
        <el-table-column :label="$t('mes.lvtLoading')">
          <el-table-column prop="lvtCode" :label="$t('mes.materialNumber')">
            <template #default="scope">
              <el-popover trigger="hover" placement="top" width="200">
                <el-descriptions class="margin-top" :column="1" size="small" border>
                  <el-descriptions-item>
                    <template #label>
                      <i class="el-icon-user"></i>
                      {{ $t('mes.lvtSpec') }}
                    </template>
                    {{ scope.row.lvtSpec }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template #label>
                      <i class="el-icon-user"></i>
                      {{ $t('mes.lvtsUnmet') }}
                    </template>
                    {{ scope.row.lvtUnmetQty }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template v-slot:label>
                      <i class="el-icon-user"></i>
                      {{ $t('mes.lvtTablets') }}
                    </template>
                    {{ scope.row.lvtPcsPerCarton }}
                  </el-descriptions-item>
                </el-descriptions>
                <template v-slot:reference>
                  <div class="name-wrapper">
                    <el-tag size="large" effect="plain">{{ scope.row.lvtCode }}
                    </el-tag>
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="lvtName" :label="$t('mes.name')" width="100" />
          <!--<el-table-column prop="lvtSpec" label="LVT规格" width="60" />-->
          <!--<el-table-column prop="lvtUnmetQty" label="LVT未满足数量" />-->
          <!--<el-table-column prop="lvtPcsPerCarton" label="LVT每托片数" />-->
          <el-table-column prop="lvtQty" :label="$t('mes.loadingQuantity')" width="90">
            <template #default="scope">
              <el-tag effect="dark" type="">
                {{ scope.row.lvtQty }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lvtFullcatonNum" :label="$t('mes.fullTows')" width="90" />
        </el-table-column>
        <el-table-column :label="$t('mes.result')">
          <el-table-column prop="isOk" :label="$t('wms.line')" width="60">
            <template #default="scope">
              <div class="name-wrapper">
                <el-tag effect="dark" :type="scope.row.isOk === 'Y' ? 'success' : 'danger'"
                >{{ scope.row.isOk }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="isOkForWhole" :label="$t('mes.completeOrder')" width="60">
            <template #default="scope">
              <div class="name-wrapper">
                <el-tag effect="dark" :type="scope.row.isOkForWhole === 'Y' ? 'success' : 'danger'"
                >{{ scope.row.isOkForWhole }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <!--<el-table-column prop="baseUnit" label="基本单位" width1="100" />-->
        <!--<el-table-column prop="unit" label="生产单位" />-->
        <!--<el-table-column prop="materialId" label="成品物料ID" />-->
        <!--<el-table-column prop="onePunshing" label="一冲几" />-->
        <!--<el-table-column prop="processCode" label="工序代码" />-->
        <!--<el-table-column prop="processName" label="工序名称" />-->
        <!--<el-table-column prop="soId" label="销售订单ID" />-->
        <!--<el-table-column prop="address" label="地址" />-->
      </el-table>
    </div>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue'

export default {
  name: 'lvtFeedingDg',
  props: {
    dgData: {
      type: Array,
      default (rawProps) {
        return []
      }
    }
  },
  setup (props, ctx) {
    const formData = reactive({ soCode: '', soLine: '', materialCode: '' })
    const detailSearchParams = reactive({})
    const dgDataFilter = reactive([])
    // 提交代码
    const onSubmit = () => {
      detailSearchParams.soCode = formData.soCode
      detailSearchParams.soLine = formData.soLine
      detailSearchParams.materialCode = formData.materialCode
    }
    /* 筛选数据 */
    watchEffect(() => {
      let arr = props.dgData ? JSON.parse(JSON.stringify(props.dgData)) : []
      Object.keys(detailSearchParams || {}).forEach(key => {
        arr = arr.filter(el => {
          return (el[key] + '').includes(detailSearchParams[key])
        })
      })
      dgDataFilter.length = 0
      dgDataFilter.push(...arr)
    })

    return { formData, onSubmit, dgDataFilter }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-sizing: border-box;

  .dg-toolbar {
    height: 50px;

    .menu-wrapper {
      position: relative;
      display: flex;

      .dg-view-menu {
        width: 100%;
        padding-left: 20px;

        .el-menu-item {
          height: 50px;
          line-height: 50px;
          margin: 0 20px;
        }
      }

      .menu-right {
        position: absolute;
        top: 10px;
        right: 20px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .dg-content {
    flex: 1 1 auto;
    height: 90%;
  }

}
</style>
